@use 'sass:map';
@use 'sass:color';
@use '@angular/material' as mat;

@mixin color($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);
  $warn: map.get($config, warn);

  .mat-progress-bar {
    &.mat-success {
      .mat-progress-bar-fill::after {
        background-color: rgb(0, 177, 0);
      }
    }
  }

  .ngm-color {
    &.ngm-color__colors-of-sky {
      background: #e0eafc;
      background: -webkit-linear-gradient(to right, #cfdef3, #e0eafc);
      background: linear-gradient(to right, #cfdef3, #e0eafc);
    }

    &.ngm-color__decent {
      background: #4ca1af;
      background: -webkit-linear-gradient(to right, #c4e0e5, #4ca1af);
      background: linear-gradient(to right, #c4e0e5, #4ca1af);
    }
    &.ngm-color__deep-space {
      color: white;
      background: #000000;
      background: -webkit-linear-gradient(to right, #434343, #000000);
      background: linear-gradient(to right, #434343, #000000);
    }

    &.ngm-color__jupiter {
      color: white;
      background: #ffd89b; /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #19547b, #ffd89b); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(
        to right,
        #19547b,
        #ffd89b
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    &.ngm-color__steak-0 {
      background-color: #4158d0;
      background-image: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
    }

    &.ngm-color__pizza-1 {
      background-image: linear-gradient(19deg, #faaca8 0%, #ddd6f3 100%),
        url('https://webdevetc.com/images/tutorials/e_background.jpg');
      background-size: cover;
    }

    &.ngm-color__tacos-2 {
      color: white;
      background: #2c3e50; /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #4ca1af, #2c3e50); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #4ca1af, #2c3e50);
    }
  }
}

@mixin density($config-or-theme) {
}

@mixin theme($theme) {
  $color: mat.get-color-config($theme);
  $density: mat.get-density-config($theme);
  $typography: mat.get-typography-config($theme);

  @if $color != null {
    @include color($color);
  }
  @if $density != null {
    @include density($density);
  }
  @if $typography != null {
    @include typography($typography);
  }
}
